import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { getUserInfo } from "../../api";
import "./index.less";

const menus = [
  {
    key: 1,
    icon: "/images/xcap.png",
    text: "行程安排",
  },
  {
    key: 2,
    icon: "/images/hylc.png",
    text: "会议流程",
  },
  {
    key: 3,
    icon: "/images/zlck.png",
    text: "资料查看",
  },
  {
    key: 4,
    icon: "/images/hwsk.png",
    text: "会务实况",
  },
  {
    key: 5,
    icon: "/images/lxwm.png",
    text: "联系我们",
  },
];

@withRouter
export default class MyMeeting extends Component {
  state = {
    userInfo: null,
  };

  constructor(props) {
    super(props);
  }

  loadUserInfo() {
    getUserInfo().then((result) => {
      // console.log(result);
      if (result.ret == 200) {
        this.setState({
          userInfo: result.data,
        });
      }
    });
  }

  componentDidMount() {
    document.title = "我的会议";
    this.id = this.props.match.params.id;
    this.loadUserInfo();
  }

  handleMenuClick(menu) {
    if (menu.key == 1) {
      this.props.history.push("/scheduling/" + this.id);
    } else if (menu.key == 2) {
      this.props.history.push("/meetingAgenda/" + this.id);
    } else if (menu.key == 3) {
      this.props.history.push("/informationList/" + this.id);
    } else if (menu.key == 5) {
      this.props.history.push("/contactUs/" + this.id);
    } else {
      console.log(menu.name);
    }
  }

  render() {
    return (
      <div className="my-meeting">
        <div className="head">
          <div className="user">
            <div className="avatar">
              <img src={this.state.userInfo && this.state.userInfo.img}></img>
            </div>
            <div className="name">
              {this.state.userInfo && this.state.userInfo.name}
            </div>
          </div>
        </div>
        <div className="menu">
          {menus.map((menu) => (
            <div
              key={menu.key}
              className="item"
              onClick={() => {
                this.handleMenuClick(menu);
              }}
            >
              <div className="icon">
                <img src={menu.icon}></img>
              </div>
              <div className="content">
                <div>{menu.text}</div>
                <div className="gt">&gt;</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}
